<div class="button-main">
    {% if widget.is_initial %}{{ widget.initial_text }}: <a href="{{ widget.value.url }}">{{ widget.value }}</a>{% if not widget.required %}
    <input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"{% if widget.attrs.disabled %} disabled{% endif %}>
    <label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>{% endif %}<br>
    {{ widget.input_text }}:{% endif %}
    <input id="input-button" type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>
    <label class="button" for="input-button">Загрузить</label>
</div>

<style>

.button-main {
    width: 225px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    padding: 6px 12px 6px 12px;
    box-shadow: 1px 1px 2px #fff;
    background: #26725b;
}

.button-main:hover {
    background-color: #287860;
    box-shadow: 1px 1px 2px #fff;
    transition-delay: .05s;
}

.button-main:hover {
    cursor: pointer;
}

.button:hover {
    cursor: pointer;
}

#input-button {
      opacity: 0;
      visibility: hidden;
      position: absolute;
}

</style>
